<template>
  <div class="body">
    <div class="head">
      <van-col span="8">
        <div>
          <div class="login">
          <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561540339973&di=9a6ce8489fa521b09daa7ad3da4c072d&imgtype=0&src=http%3A%2F%2Fwww.bynrnews.com%2Fnew%2Fqiye%2Fupload%2F1563%2Fadmin%2F20190322%2Fa67a1cd780a247f4aea2dc21d64df107.jpg">
        </div>
        </div>
      </van-col>
     <van-col span="8">
        <van-button round class="login" to="/login">登录</van-button>
      </van-col>
      <van-col span="8">
        <van-button round class="regist" to="/register">注册</van-button>
      </van-col>
    </div>
    <div class="main">
      <van-cell-group>
        <van-field
          v-model="username"
          required
          left-icon="user-o"
          placeholder="请输入用户名"
          @click-right-icon="$toast('question')"
          @input="inp1()"
          :error-message="errusername"    
        />

        <van-field  type="password" left-icon="closed-eye" placeholder="请输入密码" required clearable v-model="password" :error-message="errpassword" @input="inp2()"/>
        <van-field  left-icon="envelop-o" placeholder="邮箱" type="email" v-model="usepxail" :error-message="erpxail" @input="inp3()"/>
        <van-field  left-icon="phone-circle-o" placeholder="电话" type="phone" v-model="userphone" :error-message="errphone" @input="inp4()"/>
      </van-cell-group>
    </div>
    <div class="foot">
      <button class="foot_1" ref="btn" @click="reg()" :disabled="disabled">注册</button>
    </div>
  </div>
</template>

<script>

import axios from "axios";
export default {
  name: "Register",
  data() {
   return{
     username:'',
     password:'',
     usepxail:'',
     userphone:'',
     errusername:'',
     errpassword:'',
     erpxail:'',
     errphone:'',
     disabled:true
     
     
   }
  },
  mounted() {
    
  },
  methods: {
    inp1(){
      let r =/^[a-z0-9_-]{3,16}$/
      if(r.test(this.username)){
        this.errusername = ''
      }else{
        this.errusername ='用户名格式错误'
         this.disabled = true
      }
      if(this.errusername == '' & this.errpassword == '' & this.erpxail == '' & this.errphone == ''){
        this.disabled = false

      }
    },
    inp2(){
       let r =/^[a-z0-9_-]{6,16}$/
      if(r.test(this.password)){
        this.errpassword = ''
      }else{
        this.errpassword ='密码格式错误'
         this.disabled = true
      }
      if(this.errusername == '' & this.errpassword == '' & this.erpxail == '' & this.errphone == ''){
        this.disabled = false

      }

    },
    inp3(){
         let r =/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/
      if(r.test(this.usepxail)){
        this.erpxail = ''
      }else{
        this.erpxail ='邮箱格式错误'
         this.disabled = true
      }
      if(this.errusername == '' & this.errpassword == '' & this.erpxail == '' & this.errphone == ''){
        this.disabled = false

      }
    },
    inp4(){
          let r =/^1(3|4|5|6|7|8|9)\d{9}$/
      if(r.test(this.userphone)){
        this.errphone = ''
      }else{
        this.errphone ='电话格式错误'
         this.disabled = true
      }
      if(this.errusername == '' & this.errpassword == '' & this.erpxail == '' & this.errphone == ''){
        this.disabled = false

      }
    },
    reg(){
      var _this = this;
    axios({
      url: "http://10.8.158.60:8080/user/register",
      params: {
        username:_this.username,
        password:_this.password
      }
    }).then(function(data) {
      
      if(data.data.code == 1){
        alert(data.data.msg)
        _this.$router.push('/login')
      }else{
         alert(data.data.msg)
      }
     
    });
    }
    
  }
};
</script>

<style scoped>
.body {
  width: 375px;
  background-color: #ffffff;
}
.head {
  padding-top: 20px;
  width: 375px;
  height: 250px;
  line-height: 20px;
  border-radius: 8px;
  background-color: rgba(242, 242, 242, 1);
  text-align: center;

}
.login img{
  width: 99px;
  height: 42px;
}
.login {
  width: 99px;
  height: 42px;
  line-height: 20px;
  border-radius: 56px;
  background-color: rgba(232, 231, 231, 1);
  color: rgba(100, 100, 100, 1);
  font-size: 14px;
  text-align: center;
  overflow: hidden;

}
.regist {
  width: 99px;
  height: 42px;
  line-height: 20px;
  border-radius: 56px;
  background-color: rgba(255, 182, 75, 1);
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  text-align: center;

}
.van-cell-group{
  height: 300px;
}
.foot_1 {
  margin-top: 150px;
  width: 375px;
  height: 65px;
  line-height: 20px;
  background-color: rgba(255, 182, 75, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: center;
  border: 0
}
</style>
